<style lang="scss">
  @import "../../styles/base";

  page {
    background-color: #f5f5f5;
  }

  .container {
    height: 100vh;
    .title {
      padding-bottom: pxToRem(30);
      padding-top: pxToRem(360);
      font-size: pxToRem(48);
      color: $black;
      text-align: center;
    }
    .desc {
      padding-bottom: pxToRem(40);
      font-size: pxToRem(36);
      color: $black;
      text-align: center;
    }
    .ssid-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: pxToRem(70);
      margin-left: pxToRem(170);
      margin-right: pxToRem(170);
      padding-top: pxToRem(60);
      padding-bottom: pxToRem(60);
      .icon-user {
        @include middle-center-y();
        left: 0;
        width: pxToRem(60);
        height: pxToRem(59/45*60);
      }
      .ssid-tip {
        font-size: pxToRem(45);
        color: $light-black;
      }
      .ssid {
        font-size: pxToRem(45);
        margin-left: pxToRem(10);
        color: $black;
      }
    }
    .form-group {
      display: flex;
      align-items: center;
      margin-left: pxToRem(170);
      margin-right: pxToRem(170);
      padding-top: pxToRem(60);
      padding-bottom: pxToRem(60);
      &.border-t {
        border-top: pxToRem(1) solid #a0a0a0;
      }
      .icon-password {
        width: pxToRem(65);
        height: pxToRem(66/52*65);
      }
      .form-control {
        padding-left: pxToRem(60);
        padding-right: pxToRem(60);
        margin-left: pxToRem(30);
        width: pxToRem(720);
        height: pxToRem(120);
        line-height: pxToRem(120);
        border-radius: pxToRem(60);
        background-color: #fff;
      }
    }
    .btn-password {
      font-size: pxToRem(42);
      margin-left: pxToRem(765);
      color: $black;
    }
    .tip {
      padding-top: pxToRem(50);
      font-size: pxToRem(40);
      color: $black;
      text-align: center;
    }
    .btn-confirm {
      margin-top: pxToRem(50);
      margin-left: pxToRem(170);
      margin-right: pxToRem(170);
      height: pxToRem(120);
      line-height: pxToRem(120);
      text-align: center;
      color: $black;
      font-size: pxToRem(50);
      border-radius: pxToRem(60);
      border: pxToRem(1.5) solid #d3d3d3;
    }
    .btn-next {
      @include middle-center-x();
      bottom: pxToRem(100);
      width: pxToRem(1022);
      height: pxToRem(120);
      line-height: pxToRem(120);
      text-align: center;
      font-size: pxToRem(50);
      color: #1f1f1f;
      border-radius: pxToRem(58);
      background-color: $main-color;
    }
  }

  .iphoneX {

  }
</style>
<template>
  <div class="container" :class="isIphoneX ? 'iphoneX':''">
    <div class="title">配置设备工作Wi-Fi</div>
    <!--<div class="desc">当前设备连接Wi-Fi</div>-->
    <div class="ssid-wrap">
      <img class="icon-user" src="/static/img/connect/user.png">
      <span class="ssid-tip">当前WIFI:</span><span class="ssid">{{dataForm.ssid}}</span>
    </div>
    <div class="form-group border-t">
      <img class="icon-password" src="/static/img/connect/password.png">
      <input class="form-control" v-model="dataForm.password">
    </div>
    <!--<div class="btn-password" @click="togglePassword">{{showPassword ? '隐藏密码':'显示密码'}}</div>-->
    <div class="tip">不能支持5G Wi-Fi热点</div>
    <div class="btn-confirm" @click="toChange">更换其他WiFi</div>
    <div class="btn-next" @click="toConfig">下一步</div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        isIphoneX: /iPhone X/.test(App.systemInfo.model),
        isIos: /iOS/.test(App.systemInfo.system),
        showPassword: true,
        dataForm: {
          ssid: '',
        },
        isScaning: false,
      }
    },
    components: {},
    methods: {
      toChange() {
        if(this.isScaning){
          return false;
        }
        if(this.isIos){
          wx.startWifi({
            success: () => {
              wx.getWifiList();
            }
          })
        }else{
          wx.showModal({
            title: '切换网络提示',
            content: '请在系统-设置页面中更改手机正在连接的Wi-Fi。再回到小程序进行下一步配置。注意这款设备不支持5G的Wi-Fi热点哦',
            showCancel: false
          })
        }
      },
      togglePassword() {
        this.showPassword = !this.showPassword;
      },
      async toConfig() {
        if(this.isScaning){
          return false;
        }
        console.info(this.dataForm)
        if (!this.dataForm.ssid) {
          wx.showToast({
            title: '请输入SSID',
            icon: 'none'
          })
          return false;
        }
        if(this.dataForm.password && this.dataForm.password.length < 8){
          wx.showModal({
            content: 'WIFI密码小于8位，请检查输入后重试。',
            showCancel: false
          })
          return false;
        }
        App.currentForm = this.dataForm;
        if (this.isIos) {
          wx.navigateTo({ url: '/pages/wifi-list/main' })
        } else {
          this.isScaning = true;
          wx.onGetWifiList(result => {
            if (result.wifiList && !this.isJump) {
              result.wifiList.forEach(wifi => {
                if (/^deerma_300/.test(wifi.SSID) || /^WTCCN/.test(wifi.SSID)) {
                  this.isJump = true;
                  App.currentSSID = wifi.SSID;
                  wx.hideLoading();
                  clearInterval(this.scanTask)
                  clearTimeout(this.timeoutTask)
                  wx.connectWifi({
                    SSID: App.currentSSID,
                    password: '',
                    complete: () => {
                      wx.navigateTo({ url: '/pages/process/main' })
                    }
                  })
                }
              })
            }
          })
          wx.showLoading({
            title: '搜索设备WiFi...'
          })
          this.timeoutTask = setTimeout(() => {
            if(!this.isJump){
              wx.hideLoading();
              wx.navigateTo({ url: '/pages/search-fail/main' })
            }
          }, 30*1000)
          this.scanTask = setInterval(() => {
            !this.isJump && wx.getWifiList();
          }, 3000)
        }
      }
    },
    onHide() {
      this.isScaning = false;
      clearTimeout(this.scanTask);
      clearTimeout(this.timeoutTask)
    },
    async onShow() {
      if (!App.userInfo) {
        await App.fetchLogin();
      }
      this.isJump = false;
      wx.startWifi({
        success: async () => {
          let result = await wx.getConnectedWifi();
          console.log('getConnectedWifi:' + JSON.stringify(result));
          if (result.wifi) {
            this.dataForm.ssid = result.wifi.SSID;
          }
          wx.onWifiConnected(result => {
            if(this.isJump){
              return false;
            }
            if (!/^deerma_300/.test(result.wifi.SSID)) {
              this.dataForm.ssid = result.wifi.SSID;
            }
          })
        }
      })
    },
  }
</script>
